<template>
    <div class="login-page">
        <login-form
                @login="login"
        ></login-form>
    </div>
</template>

<script>
    import LoginForm from '@/components/LoginPage/LoginForm';
    import dataOperate from '@/services';

    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';

    export default {
        name: "LoginPage",
        components: {
            LoginForm
        },
        setup() {
            const store = useStore(),
                  state = store.state,
                  router = useRouter();

            const login = (data) => {
                dataOperate(store, 'login', data);
                router.push('/');
                alert('登录成功');
            }

            return {
                login
            }
        }
    }
</script>

<style lang="scss" scoped>
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/img/login-background.jpg);
    background-size: cover;
    height: 100%;
}
</style>